const httpUtil = require('../../utils/httpUtil.js');

Page({
  data: {
    button_flag: false, // 顶部搜索栏 右边清除按钮
    isComplete: false, // loading动画
    historyList: [], // 历史搜索list，maxlength = 10
    hotList: [], // 热门搜索list，onload时加载
    poiList: [], // 输入搜索词后显示poi，需处理无匹配（res.result.allMatch == undefined） 的缺省页
    searchDetailList: [], //确定搜索后，显示的详细搜索列表。需处理无匹配（res.result.songs数组 不存在）的缺省页
    search_value: '', // 顶部input的具体值,用于调用搜索详情接口
    poiNonePageFlag: false, // 控制是否显示poi列表缺省页的flag
    resultNonePageFlag: false, // 控制是否显示搜索详情列表缺省页的flag）
    defaultShowFlag: true, // 控制默认页面显示的flag
    poiFlag: false,
    input_disable: false, // 处理请求详情页时 禁止改变input的flag
    button_disable: false, //处理请求详情页时 禁止点击删除按钮的flag
  },

  onLoad() {
    this.getHistory()
  },

  onShow() {
    this.getHotList();
  },
  // 读取历史记录方法
  getHistory() {
    // 读取localStorage，获取用户历史搜索list
    let historyList = wx.getStorageSync("historyList");
    if (historyList.length == 0) {
      historyList = [];
    }
    this.setData({
      historyList
    })
  },

  // 清除历史记录方法
  clearHistory() {
    let that = this;
    wx.showModal({
      title: '提示',
      content: '确定清除历史记录吗？',
      success(res) {
        if (res.confirm) {
          let historyList = [];
          that.setData({
            historyList
          })
          wx.setStorageSync("historyList", historyList)
        }
      }
    })

  },

  // 获取热门搜索方法
  getHotList() {
    httpUtil.gethotsongs({
      type: 'new'
    }).then(res => {
      if (res.code == 200) {
        console.log('拉取的热门搜索list：', res.result)
        this.setData({
          hotList: res.result.hots,
        })
        setTimeout(() => {
          this.setData({
            isComplete: true
          })
        }, 500)
      } else {
        wx.showToast({
          title: '服务器开了点小差,请稍后再试~',
          icon: 'none'
        })
      }
    })
  },

  // 获取搜索详情结果方法 ， 执行时将本次搜索的关键词存入缓存（多入口调用）
  getSearchDetail(keyword) {
    keyword == undefined ? keyword = this.data.search_value : {};
    // 0. 设置历史记录
    let historyList = this.data.historyList;
    // 需要判断，长度是否超过6 且 是否重复 再push. 若超出length需要pop最旧的一项

    if (keyword != '' && keyword.trim() != '') {
      if (!historyList.some((item, index) => {
          return item == keyword
        })) {
        if (historyList.length < 6) {
          // 永远unshift
          historyList.unshift(keyword);
        } else {
          // 数组已满，清除最旧一项，再unshift
          historyList.pop();
          historyList.unshift(keyword);
        }
      }
    }


    // 存入localStorage
    wx.setStorageSync("historyList", historyList)

    // 1. 清除POI相关，处理poi缺省页出现时回车搜索
    this.setData({
      input_disable: true,
      button_disable: true,
      poiFlag: false,
      poiNonePageFlag: false,
      search_value: keyword
    })

    console.log('搜索的关键字是：', keyword)
    if (this.data.search_value == '' || this.data.search_value.trim() == '') {
      wx.showToast({
        title: '关键字不能为空！',
        icon: 'none'
      })
      this.setData({
        isComplete: true,
        button_disable: false,
        input_disable: false,
        defaultShowFlag: true
      })
      return;
    }

    httpUtil.searchResult({
      keywords: keyword,
      type: 1,
      limit: 100,
      offset: 2
    }).then(res => {
      if (res.code === 200) {
        console.log(res.result)
        if (res.result.songs == undefined) {
          console.log("搜索详情进入缺省页")
          this.setData({
            button_disable: false,
            input_disable: false,
            isComplete: true,
            resultNonePageFlag: true,
            poiList: [],
          })
          return;
        } else {
          this.setData({
            resultNonePageFlag: false
          })
        }
        // 正常拿到数据后
        this.setData({
          button_disable: false,
          input_disable: false,
          searchDetailList: res.result.songs,
          poiNonePageFlag: false,
          poiList: [],
          search_value: keyword,
          isComplete: true
        })
        // setTimeout(() => {
        //   this.setData({
        //     isComplete: true
        //   })
        // }, 500)
      } else {
        wx.showToast({
          title: '服务器开了点小差,请稍后再试~',
          icon: 'none'
        })
        this.setData({
          button_disable: false,
          input_disable: false
        })
      }
    })
  },

  // input过程中触发的请求实时poi列表
  getSearchPOI() {
    if (this.data.search_value != '' && this.data.search_value.trim() != '') {
      this.setData({
        button_flag: true
      })
      httpUtil.searchSuggest({
        keywords: this.data.search_value,
        type: 'mobile'
      }).then(res => {
        if (res.code === 200) {
          console.log(res.result);
          // 如果res.result.allMatch无此字段，代表没有匹配的关键字、每次拉POI列表的时候都更新flag
          if (res.result.allMatch == undefined) {
            console.log('POI列表进入缺省页')
            this.setData({
              poiNonePageFlag: true
            })
            return;
          } else {
            this.setData({
              poiNonePageFlag: false
            })
          }

          this.setData({
            poiList: res.result.allMatch
          })
          // 双层保险：清空poi（配合input中的清空，防止删除过快情况下list仍残留数据）
          if (this.data.search_value == '') {
            this.setData({
              poiList: []
            })
          }
          setTimeout(() => {
            this.setData({
              isComplete: true
            })
          }, 500)
        } else {
          wx.showToast({
            title: '服务器开了点小差,请稍后再试~',
            icon: 'none'
          })
        }
      })
    } else {
      this.setData({
        button_flag: false
      })
    }

  },



  // 自定义top栏点击home按钮返回index主页
  handlerGohomeClick() {
    wx.switchTab({
      url: '/pages/index/index',
    })
  },

  // 顶部搜索栏： bindInput 需要处理保证安卓上不会出现内容抖动bug
  search(e) {
    console.log('bindInput被触发:', e.detail.value, this.data.search_value)


    // 清除result相关：处理歌曲详情为空时，input回删
    this.setData({
      search_value: e.detail.value,
      resultNonePageFlag: false,
      searchDetailList: []
    })
    if (e.detail.value == '') {
      this.setData({
        poiList: [],
      })
    }
    console.log(e.detail.value, this.data.poiList);

    // 如果是非POI点击的情况，才设置值，并执行poi搜索

    this.getSearchPOI();


  },

  // 顶部搜索栏： bindFocus
  searchFocus() {
    console.log('input 聚焦')
    this.setData({
      defaultShowFlag: false,
    })
  },

  // 顶部搜索栏： bindblur
  searchBlur() {
    console.log('input 失焦')
    if (this.data.search_value == '') {
      this.getHistory();
      this.setData({
        defaultShowFlag: true
      })
    }
  },

  // 顶部搜索栏： bindConfirm,bindBlur
  confirmSearch() {
    // 清空poiList
    this.setData({

      isComplete: false
    })
    this.getSearchDetail();
  },

  // 顶部搜索栏：点击清除按钮 RESET_ALL
  search_delete() {
    if (this.data.button_disable == false) {
      this.getHistory();
      this.setData({
        button_flag: false,
        search_value: '',
        searchDetailList: [],
        poiList: [],
        poiNonePageFlag: false,
        resultNonePageFlag: false,
        defaultShowFlag: true,
      })
    }
  },

  // 热门搜索 点击列表项回填搜索框 , 直接执行搜索方法 。 存入历史搜索数组
  clickHot(e) {
    // console.log(e.currentTarget.dataset.item_name)

    let name = e.currentTarget.dataset.item_name;
    this.setData({
      button_flag: true,
      defaultShowFlag: false,
      search_value: name,
      isComplete: false
    })

    // 执行搜索详情
    this.getSearchDetail();
  },

  // 搜索详情页 点击歌曲进入播放
  clickDetail(e) {
    let songId = e.currentTarget.dataset.songid;
    let name = e.currentTarget.dataset.item_name;
    console.log('准备播放歌曲：', name , songId)
    // 跳转
    wx.navigateTo({
      url: `/pages/play/play?name=${name}&id=${songId}`,
    })
  },

  // POI列表 点击执行搜索
  clickPOI(e) {
    let keyword = e.currentTarget.dataset.keyword;
    // 清空poi，准备显示详情页
    this.setData({
      poiFlag: true,
      search_value: keyword,
      // poiList: [],
      isComplete: false
    })

    this.getSearchDetail(keyword);
  },

  // 历史记录 点击tag执行搜索
  clickHistroy(e) {
    let name = e.currentTarget.dataset.name;
    this.setData({
      button_flag: true,
      defaultShowFlag: false,
      search_value: name,
      isComplete: false
    })
    // 执行搜索详情
    this.getSearchDetail();
  },



  // EOF: 滴定仪top栏点击返回按钮执行的方法
  handlerGobackClick() {
    // wx.showModal({
    //   title: '你点击了返回',
    //   content: '是否确认放回',
    //   success: e => {
    //     if (e.confirm) {
    //       const pages = getCurrentPages();
    //       if (pages.length >= 2) {
    //         wx.navigateBack({
    //           delta: 1
    //         });
    //       } else {
    //         wx.navigateTo({
    //           url: '/pages/index/index'
    //         });
    //       }
    //     }
    //   }
    // });
    wx.navigateBack({

    })
  },

});